<script>
import { myMixin } from "../core/mixins.js";
console.log(myMixin);
export default {
  mixins: [myMixin],
  directives: {
    click: {
      // 指令的定义
      inserted: function (el) {
        el.addEventListener("click", function () {
          console.log("点击事件");
        });
      },
    },
  },
  data() {
    return {
      message: "Hello Vue!",
    };
  },
  beforeCreate() {
    // 创建之前,data和methods的对象还没有初始化，作用：页面重定向
    console.log("beforeCreate");
    console.log(this.msg); //undefined
  },
  created() {
    // 创建之后，data和methods中的数据初始化完成，第一个可以操作data和methods中的数据的生命周期
    // 作用：数据初始化，接口请求
    console.log("created");
    console.log(this.msg);
  },
  beforeMount() {
    // 虚拟dom挂载
    console.log("beforeMount");
    console.log(document.querySelector("#box")); //null
  },
  // 执行0次或更多次
  beforeUpdate() {
    console.log("beforeUpdate");
    // 更新之前，data和页面内的数据还未保持同步，页面中的数据是旧的，data中的数据是最新的
  },
  updated() {
    console.log("updated");
    // 更新之后，data和页面中的数据已经保持一致
  },
  beforeDestroy() {
    console.log("beforeDestroy");
    // 销毁之前，页面还没有真正的销毁
    // 作用：清空页面监听和定时器
  },
  destroyed() {
    console.log("destroyed");
    // 销毁之后
  },
  mounted() {
    console.log("mixins", myMixin);
    // 真实的dom，第一个可以操作dom元素的生命周期
    console.log("mounted");
    console.log(document.querySelector("#box"));
    // dom渲染完成，可以操作真实dom 元素了

    // --js浅拷贝
    let o = { a: 11, b: 21, name: "zhangsan", age: 20 };
    let b = o;
    b.a = 100;
    let c = Object.assign({}, o);
    c.a = 200;
    let d = { ...o };
    d.a = 300;
    console.log("c:", c);
    console.log("o:", o, "b:", b);
    console.log("d:", d);

    let obj = {};
    console.log(obj);
    def(obj, "ak", 100, true);
    console.log(obj);
    // --js深拷贝，
    // 一、JSON.parse(JSON.stringify()) 方法，
    // 1、无法复制函数、undefined、Symbol 等特殊类型。
    // 2、无法处理循环引用的对象。
    // 3、会忽略 Date 对象的类型，将其转换为字符串
    const _original = { a: 1, b: { c: 2 } };
    const _deepCopy = JSON.parse(JSON.stringify(_original));

    console.log(_deepCopy); // { a: 1, b: { c: 2 } }

    _deepCopy.b.c = 20;
    console.log(_original); // 2
    console.log(_deepCopy); // 20
    // 二、递归函数实现深拷贝，深拷贝创建一个新的对象，并递归地复制所有嵌套的对象和数组。这意味着新对象和原始对象在任何层级上都没有共享的引用，彼此完全独立。
    function deepCopy(obj, hash = new WeakMap()) {
      console.log(hash);
      if (obj === null) return obj;
      if (obj instanceof Date) return new Date(obj);
      if (obj instanceof RegExp) return new RegExp(obj);
      if (typeof obj !== "object") return obj;

      if (hash.has(obj)) return hash.get(obj);
      const newObj = Array.isArray(obj) ? [] : {};
      hash.set(obj, newObj);
      console.log(hash);
      for (let key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          newObj[key] = deepCopy(obj[key], hash);
        }
      }
      return newObj;
    }
    const original = { a: 1, b: { c: 2 } };
    const deepCopyObj = deepCopy(original);

    deepCopyObj.b.c = 20;
    console.log("original:", original); // 2
    console.log("deepCopyObj:", deepCopyObj); // 2
    // 数组转化
    const arrayLike = { 0: "a", 1: "b", length: 2 };
    const arr = Array.from(arrayLike);
    console.log(arr); // 输出: ['a', 'b']
  },
  methods: {},
};
console.log(window);
function def(obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true,
  });
}
</script>
<template>
  <div>
    <div>
      <h3>测试</h3>
      <p>{{ messaget }}</p>
    </div>
    <div id="box" v-click>输入框</div>
  </div>
</template>
